import React, { useEffect } from 'react'
import {
  Spin,
  Row,
  Col,
  DatePicker,
  Divider,
  Typography,
  Menu,
  Anchor,
  Button
} from 'antd'
import { useTranslation } from 'react-i18next'
import { ShoppingCartOutlined } from '@ant-design/icons'
import { useParams } from 'react-router-dom'
import styles from './Detail.module.css'
import { ProductIntro, ProductComments } from '../../components'
import { commentMockData } from './mockup'
import { getProductDetail } from '../../redux/productDetail/slice'
import { useSelector, useAppDispatch } from '../../redux/hook'
import { MainLayout } from '../../layout/MainLayout'
import { addShoppingCartItem } from '../../redux/shoppingCart/slice'
const { RangePicker } = DatePicker
type MathParams = {
  touristId: string
}
// 对某个类型重命名定义的时候 使用type

export const Detail: React.FC = (props) => {
  const { t } = useTranslation()
  const { touristId } = useParams<MathParams>()
  const loading = useSelector((state) => state.productDetail.loading)
  const product = useSelector((state) => state.productDetail.data)
  const error = useSelector((state) => state.productDetail.error)
  const dispatch = useAppDispatch()
  const jwt = useSelector((s) => s.user.jwt) as string
  const shoppingCartLoading = useSelector((s) => s.shoppingCart.loading)
  useEffect(() => {
    if (touristId) {
      dispatch(getProductDetail(touristId))
    }
  }, [touristId, dispatch])
  if (loading) {
    return (
      <Spin
        size="large"
        style={{
          marginTop: 200,
          marginBottom: 200,
          marginLeft: 'auto',
          marginRight: 'auto',
          width: '100%'
        }}
      ></Spin>
    )
  }
  if (error) {
    return <div>网站出错：{error}</div>
  }
  return (
    <MainLayout>
      <div className={styles['product-intro-container']}>
        <Row>
          <Col span={13}>
            <ProductIntro
              title={product.title}
              shortDescription={product.description}
              price={product.originalPrice}
              coupons={product.coupons}
              points={product.points}
              discount={product.price}
              rating={product.rating}
              pictures={product.touristRoutePictures.map((p) => p.url)}
            />
          </Col>
          <Col span={11}>
            <Button
              style={{
                marginTop: 50,
                marginBottom: 30,
                display: 'block'
              }}
              type="primary"
              danger
              loading={shoppingCartLoading}
              onClick={() => {
                dispatch(
                  addShoppingCartItem({ jwt, touristRouteId: product.id })
                )
              }}
            >
              <ShoppingCartOutlined />
              {t('header.addCart')}
            </Button>
            <RangePicker style={{ marginTop: 20 }} />
          </Col>
        </Row>
      </div>
      <Anchor className={styles['product-detail-anchor']}>
        <Menu mode="horizontal">
          <Menu.Item key="1">
            <Anchor.Link href="#feature" title="产品特色"></Anchor.Link>
          </Menu.Item>
          <Menu.Item key="3">
            <Anchor.Link href="#fees" title="费用"></Anchor.Link>
          </Menu.Item>
          <Menu.Item key="4">
            <Anchor.Link href="#notes" title="预订须知"></Anchor.Link>
          </Menu.Item>
          <Menu.Item key="5">
            <Anchor.Link href="#comments" title="用户评价"></Anchor.Link>
          </Menu.Item>
        </Menu>
      </Anchor>
      <div id="feature" className={styles['product-detail-container']}>
        <Divider orientation="center">
          <Typography.Title level={3}>产品特色</Typography.Title>
        </Divider>
        <div
          dangerouslySetInnerHTML={{ __html: product.features }}
          style={{ margin: 50 }}
        ></div>
      </div>
      <div id="fees" className={styles['product-detail-container']}>
        <Divider orientation="center">
          <Typography.Title level={3}>产品费用</Typography.Title>
        </Divider>
        <div
          dangerouslySetInnerHTML={{ __html: product.fees }}
          style={{ margin: 50 }}
        ></div>
      </div>
      <div id="notes" className={styles['product-detail-container']}>
        <Divider orientation="center">
          <Typography.Title level={3}>预定须知</Typography.Title>
        </Divider>
        <div
          dangerouslySetInnerHTML={{ __html: product.notes }}
          style={{ margin: 50 }}
        ></div>
      </div>
      <div id="comments" className={styles['product-detail-container']}>
        <Divider orientation="center">
          <Typography.Title level={3}>用户评价</Typography.Title>
        </Divider>
        <div style={{ margin: 40 }}>
          <ProductComments data={commentMockData} />
        </div>
      </div>
    </MainLayout>
  )
}
